<template>
  <div class="publisher-book-list">
    <h2>{{ publisher }}出版的书籍列表</h2>
    <template>
      <div>
        <book-card :books="currentBookList"></book-card>

        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="filteredBooks.length"
            @current-change="handleCurrentChange"
        />
      </div>
    </template>
  </div>
</template>

<script>
import { books } from "@/assets/data/booksData";
import BookCard from "@/components/Bookcard.vue";

export default {
  name: 'PublisherBookList',
  components: {BookCard},
  props: ['publisher'],
  data() {
    return {
      bookList: books, // 初始化书籍数组
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: {
    filteredBooks() {
      return this.bookList.filter(book => book.publisher === this.publisher);
    },
    // currentBookList 应基于 filteredBooks 进行分页
    currentBookList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredBooks.slice(start, end);
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

